<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
    <!-- Main Content -->
    <main class="container mx-auto px-6 py-8">
      <!-- Health Stats -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Elderly Health Card -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-800">TOP5员工</h2>
            <i class="el-icon-first-aid-kit text-blue-500 text-xl"></i>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div v-for="(item, index) in topMedical" :key="index" class="flex items-center space-x-3">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                <span class="text-sm font-bold text-blue-600">{{ index + 1 }}</span>
              </div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-800">{{ item.mname }}</p>
                <div class="flex items-center space-x-2">
                  <div class="h-2 bg-gray-200 rounded-full flex-1 overflow-hidden">
                    <div class="h-full bg-blue-500 rounded-full" :style="`width: ${item.count}%`"></div>
                  </div>
                  <span class="text-xs text-gray-500">{{ item.count }}人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Staff Attendance Card -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-800">员工考勤</h2>
            <i class="el-icon-time text-blue-500 text-xl"></i>
          </div>
          <div class="space-y-4">
            <div>
              <p class="text-sm text-gray-500 mb-1">今日出勤率</p>
              <div class="flex items-center space-x-4">
                <div class="w-16 h-16 rounded-full flex items-center justify-center bg-blue-100">
                  <span class="text-xl font-bold text-blue-600">{{(attendance.totalpeople - attendance.holidayNumber)/attendance.totalpeople * 100}}%</span>
                </div>
                <div class="flex-1">
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-blue-500 rounded-full" style="width: 100%"></div>
                  </div>
                  <div class="flex justify-between text-xs text-gray-500 mt-1">
                    <span>出勤: {{attendance.totalpeople - attendance.holidayNumber}}人</span>
                    <span>缺勤: {{attendance.holidayNumber}}人</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-blue-50 rounded-lg p-3">
                <p class="text-sm text-gray-500 mb-1">迟到</p>
                <p class="text-xl font-bold text-blue-600">{{attendance.holidayNumber}}人</p>
              </div>
              <div class="bg-blue-50 rounded-lg p-3">
                <p class="text-sm text-gray-500 mb-1">请假</p>
                <p class="text-xl font-bold text-blue-600">{{attendance.holidayNumber}}人</p>
              </div>
            </div>
          </div>
        </div>
        <!-- Food Ranking Card -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-gray-800">菜品排名</h2>
            <i class="el-icon-food text-blue-500 text-xl"></i>
          </div>
          <div class="space-y-3">
            <div v-for="(item, index) in topFoods" :key="index" class="flex items-center space-x-3">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                <span class="text-sm font-bold text-blue-600">{{ index + 1 }}</span>
              </div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-800">{{ item.name }}</p>
                <div class="flex items-center space-x-2">
                  <div class="h-2 bg-gray-200 rounded-full flex-1 overflow-hidden">
                    <div class="h-full bg-blue-500 rounded-full" :style="`width: ${item.count}%`"></div>
                  </div>
                  <span class="text-xs text-gray-500">{{ item.count }}份</span>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-gray-100">
            <p class="text-sm text-gray-600">今日满意度: <span class="text-green-500">4.8/5</span></p>
          </div>
        </div>
      </div>
      <!-- Recent Activities -->
      <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-semibold text-gray-800">近期活动</h2>
          <button class="text-sm text-blue-500 hover:text-blue-600">查看全部</button>
        </div>
        <div class="space-y-4">
          <div v-for="(item, index) in recentActivities" :key="index" class="flex items-start space-x-3">
            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-1">
              <i :class="`el-icon-${item.icon} text-blue-500 text-sm`"></i>
            </div>
            <div class="flex-1">
              <p class="text-sm font-medium text-gray-800">{{ item.userName }}</p>
              <p class="text-xs text-gray-500">{{ item.methodType }}</p>
              <p class="text-xs text-gray-500">{{ item.methodTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  <footer :style="{ left: '15rem' }" class="fixed bottom-0 right-0 bg-white border-t border-gray-200 py-4 z-40" ref="footer">
    <div class="container mx-auto px-6">
      <div class="flex items-center justify-between">
        <p class="text-sm text-gray-500">© 2023 养老易管理系统 - 为老年人提供专业服务</p>
        <div class="flex items-center space-x-4">
          <button class="text-sm text-gray-500 hover:text-blue-500">帮助中心</button>
          <button class="text-sm text-gray-500 hover:text-blue-500">关于我们</button>
          <button class="text-sm text-gray-500 hover:text-blue-500">联系我们</button>
        </div>
      </div>
    </div>
  </footer>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import echartsApi from '@/api/admin/echartsApi'
const activeMenu = ref('/');
const handleSelect = (index: string) => {
  activeMenu.value = index;
};
const topFoods = ref([]);
const topMedical= ref([]);
const attendance = ref({})
const recentActivities = ref([]);
// 查询用户日志
const userLog = () => {
  echartsApi.userLog()
    .then(resp => {
      recentActivities.value = resp.data;
    })
}
// 查询top5菜品
const top5dish = () => {
  echartsApi.top5dish()
    .then(resp => {
      topFoods.value = resp.data;
    })
}
// 查询出勤人数
const holiday = () =>{
  echartsApi.holiday()
    .then(resp => {
      attendance.value = resp.data;
    })
}
// 查询top5护工
const top5Medical = () =>{
  echartsApi.top5Medical()
    .then(resp => {
      topMedical.value = resp.data;
    })
}
onMounted(() => {
  holiday();
  top5dish();
  userLog();
  top5Medical();
})

</script>
<style scoped>
/* Custom styles */
.bg-blue-50 {
  background-color: #E6F3FF;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu--collapse) {
  width: 100%;
}
</style>
